<template>
  <div class="commentItem">
    <!-- 用户信息 -->
    <div class="userInfo">
      <div class="info">
        <el-image v-if="props.comment.user.avatar" :src="props.comment.user.avatar" lazy></el-image>
        <img v-else src="@/assets/img/default/noPortrait.svg" />
        <div class="name">
          <div class="nickName">{{ props.comment.user.name }}</div>
          <div class="account">
            {{ props.comment.user.account }}
          </div>
        </div>
      </div>

      <div class="reply">回复</div>
    </div>
    <!-- 评论内容 -->
    <div class="commentContent">
      <div class="commentInfo">{{ props.comment.content }}</div>
      <div class="time">{{ formatDate(props.comment.createAt, true) }}</div>
    </div>
    <!-- 子评论 -->
    <div id="childrenComment">
      <recursionComment
        v-if="allChildComment.length"
        :needComment="allChildComment"
        :allComment="props.allComment"
      ></recursionComment>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import { formatDate } from "@/utils/format"
import recursionComment from "./recursionComment.vue"
interface IProps {
  comment: IComment
  allComment: IComment[]
}

interface IComment {
  id: number
  commentId: number | null
  content: string
  createAt: string
  updateAt: string
  user: any
}

const props = withDefaults(defineProps<IProps>(), {})

/* 是否需要递归 */
// const isRecursion = computed(() =>
//   // some 用于检查数组中是否至少有一个元素满足指定条件
//   props.allComment.some((item) => item.commentId === props.comment.id)
// )

// --> 根据filter返回空数组，即找不到，不需要递归

/* 需要递归的子数据 */
const allChildComment = computed(() =>
  props.allComment.filter((item) => item.commentId === props.comment.id)
)
</script>

<style lang="less" scoped>
.commentItem {
  margin-top: 24px;
  // 用户头像
  .userInfo {
    display: flex;
    justify-content: space-between;
    .info {
      display: flex;
      align-items: center;
      .el-image,
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .name {
        margin-left: 6px;
        .account {
          color: rgba(14, 21, 28, 0.4);
        }
      }
    }
    .reply {
      cursor: pointer;
      color: #409eff;
      line-height: 50px;
      letter-spacing: 0.5px;
    }
  }

  // 评论信息
  .commentContent {
    margin-left: 50px;
    margin-top: 6px;

    color: #0e151c;
    font-size: 16px;
    .time {
      margin-top: 8px;
      font-size: 14px;
      color: rgba(14, 21, 28, 0.4);
    }
    // 子评论
    .childrenComment {
      margin-top: 20px;
      .userInfo {
        .info {
          .el-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          .name {
            font-size: 14px;
            .account {
              font-size: 12px;
            }
          }
        }
        .reply {
          font-size: 12px;
        }
      }
      .commentContent {
        padding-bottom: 20px;
        border-bottom: 0.5px solid #e4e2e2;
        // border-bottom: 0;
        font-size: 14px;
        .time {
          margin-top: 4px;
          font-size: 12px;
        }
      }
    }
  }

  #childrenComment {
    margin-left: 10px;
  }
}
</style>
